<template>
	<view>
		<Loding :isVisible="showMap"></Loding>
		<view class="content">
			<Map ref="childMap" :detailsHide="detailsHide" :confirmPage="confirmPage" @show="show"></Map>
			<view :class="['details', detailsHeight== 0 ? '':'bgblue']" :style="{bottom:detailsHeight}">
				<uni-section title="基本信息">
					<!-- 			<template v-slot:right>
						预计供地时间：{{speckleData.gdsj }}
					</template> -->
					<uni-table border stripe emptyText="暂无更多数据" style="height: 100%;">
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in showField" :key="item.id">
							<uni-td width="90" align="center">{{item.showName}}</uni-td>
							<uni-td>{{speckleData[item.columnName]}}</uni-td>
						</uni-tr>
					</uni-table>
				</uni-section>


				<view class="functionButtons">
					<u-tabbar :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
						<u-tabbar-item text="地块详情" icon="grid-fill"
							@click="goToTab('detailsOfThePlot')"></u-tabbar-item>
						<u-tabbar-item text="全景查看" icon="eye-fill" @click="goToTab('panoramicView')"></u-tabbar-item>
					</u-tabbar>
				</view>
				<view class="arrow" @click="move">
					<u-icon :name="iconName" color="#5a89c3" size="30px"></u-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		GetLayersData,
		drawPattrenSport,
		searchAndDraw
	} from "@/utils/initMap.js"
	import Loding from "@/components/loading.vue"
	import {
		getFeatureLayerUrl,
		getCategory,
		getServiceCode,
		getRichTextData
	} from "@/api/land.js"
	import {
		toast
	} from '@/utils/common'
	import {
		UrlParamHash
	} from "@/utils/auth.js"
	import Map from "@/components/Map.vue"
	export default {
		data() {
			return {
				showMap: '',
				detailsHeight: '0',
				iconName: 'arrow-down',
				detailsHide: false,
				speckleData: {},
				objectid: '',
				confirmPage: true,
				showField: [{

						"id": 111,
						"fuId": 13,
						"showName": "地块编号",
						"realName": "地块编号",
						"columnName": "bianhao",
					},
					{

						"id": 112,
						"fuId": 13,
						"showName": "名称",
						"realName": "地块名称",
						"columnName": "name",
					}, {

						"id": 113,
						"fuId": 13,
						"showName": "规划用途",
						"realName": "规划用途",
						"columnName": "ghyt",
					}, {

						"id": 114,
						"fuId": 13,
						"showName": "供地面积",
						"realName": "地块面积",
						"columnName": "mianji",
					}, {

						"id": 115,
						"fuId": 13,
						"showName": "供地方式",
						"realName": "供地方式",
						"columnName": "gdfs",
					}, {

						"id": 116,
						"fuId": 13,
						"showName": "四至",
						"realName": "四至范围",
						"columnName": "sizhi",
					}, {

						"id": 117,
						"showName": "净地情况",
						"realName": "净地情况",
						"columnName": "jdqk",
					}, {

						"id": 118,
						"showName": "基础设施",
						"realName": "配套情况",
						"columnName": "jcss",
					}, {

						"id": 119,
						"showName": "所属区",
						"realName": "所属城区开发区",
						"columnName": "quyu",
					}
				]
			}
		},
		watch: {
			"$store.state.user.attributes": {
				handler(newVal, oldVal) {
					if (newVal) {
						this.speckleData = newVal
						this.detailsHeight = '0'
						this.iconName = 'arrow-down'
						this.detailsHide = false
					}
					if (!newVal) {
						this.detailsHeight = '-16.9rem'
						this.iconName = 'arrow-up'
						this.detailsHide = true

					}
				},
				deep: true, //true 深度监听
			}
		},
		async onLoad(event) {
			this.showMap = 'block'
			this.extractToken()
			const pages = getCurrentPages(); // 获取当前打开的页面栈信息
			this.$store.state.user.route = pages[pages.length - 1].route

			const serviceCode = await getServiceCode()
			const url = await getFeatureLayerUrl(serviceCode.msg)

			await this.$refs.childMap.int(url.data[0].serveUrl);
			// uni.showLoading({
			// 	title: '图斑查询中',
			// 	mask: true
			// })

			if (!this.objectid) {
				this.objectid = event.objectid;
			}

			const parames = [{
				name: 'objectid',
				value: this.objectid,
				type: 'objectid',
				isEq: true,
			}]

			let res = await GetLayersData(parames);
			console.log(res, '0000')
			this.speckleData = res[0]
			this.$store.state.user.speckleData = this.speckleData
			drawPattrenSport(res[0].patternSpotGeo);
			// setTimeout(() => {
			// 	uni.hideLoading()
			// }, 1000)
			this.getShowField(serviceCode.msg)
		},
		onUnload() {
			this.$store.state.user.route = ''
		},
		components: {
			Map,
			Loding
		},
		methods: {
			move() {
				this.detailsHide = !this.detailsHide
				if (!this.detailsHide) {
					this.detailsHeight = '0'
					this.iconName = 'arrow-down'
					return
				}
				this.detailsHeight = '-16.9rem'
				this.iconName = 'arrow-up'
			},
			goToTab(str) {
				if (str == 'detailsOfThePlot') {
					uni.navigateTo({
						url: "/pages/Land/detailsOfThePlot?id=" + this.speckleData.objectid
					})
					return
				}
				getRichTextData(this.speckleData.objectid).then(res => {
					console.log(res)
					if (!res.data.qeldz) {
						return toast('此地块暂无全景数据')
					}
					uni.navigateTo({
						url: '/pages/common/webview/index?url=' + res.data.qeldz + '&title=地块示意图'
					})
				})
			},
			// 提取token与objectid
			extractToken() {
				let {
					token,
					objectid,
					xzq
				} = UrlParamHash(window.location.href)
				var reg = new RegExp("#/");
				token = token?.replace(reg, "");
				console.log(token, 'token')
				this.objectid = objectid
				if (xzq) {
					this.$store.state.user.detailsParams.sql = "quyu ='" + decodeURI(xzq) + "'"
				}

				if (token) {
					uni.setStorageSync("App-Token", token)
				}
			},
			// 获取展示字段
			getShowField(codeValue) {
				const data = {
					serveCode: codeValue,
					code: 'dksx'
				}
				getCategory(data).then(res => {
					this.showField = res.data
					console.log(this.showField, 'zxczxc')
				})
			},
			show() {
				console.log('111')
				this.showMap = 'none'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
	}

	.map {
		height: 100%;
		background-color: greenyellow;
	}

	.bgblue {
		background-color: #dedede;
	}

	.details {
		width: 100%;
		height: 300px;
		position: fixed;
		bottom: 0;
		// z-index: 999999;
		background-color: #d3e3fd;
		border-top-left-radius: 25px;
		border-top-right-radius: 25px;
		box-sizing: border-box;
		padding-top: 30px;
		transition: all .5s;

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			border-bottom: 1px solid #d2d2d2;
			padding: 20rpx;
		}

		.textContent {


			.row {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				margin-top: 40rpx;

				.serialNumber {
					font-weight: 600;
				}

				.rightTextWidth {
					width: 230rpx;
				}

				text {
					font-size: 12px;
				}

				view label {
					font-weight: 600;
				}
			}
		}

		.functionButtons {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-between;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;

				label {
					font-size: 14px;
					margin-left: 5px;
				}
			}
		}

		.arrow {
			width: 100%;
			position: absolute;
			text-align: center;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	::v-deep .u-icon__icon {
		font-size: 24px !important;
	}

	// ::v-deep .uni-table {
	// 	margin-bottom: 4px;
	// }

	::v-deep .u-tabbar-item__icon {
		height: 24px;
	}

	::v-deep .uni-table-tr {
		td:nth-child(1) {
			width: 160rpx;
		}
	}

	// ::v-deep .uni-section-content {
	// 	height: 11rem;
	// 	overflow: auto;
	// }

	::v-deep .uni-section-content {
		background-color: #ddd;
		height: 180px;
		// margin-bottom: 20px;
		padding: 4px;
	}
</style>